<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
        	margin:0;
    	}
     	canvas{
	        display: block;
	        margin:0 auto;
	        border:1px red solid;
    	}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
<script>
	var	canvas = document.querySelector("#canvas");
	var ctx = canvas.getContext("2d");
	var deg = Math.PI/180;
	canvas.width = 800;
    canvas.height = 600;
    //存储白纸
    //放大
    ctx.save();
    ctx.scale(2,2);
    ctx.fillStyle="blue";
    ctx.fillRect(0,0,100,100);
	ctx.restore();
	//画布位移
	ctx.save();
	
	ctx.fillStyle="yellow";
    ctx.fillRect(400,0,150,200);
    ctx.restore();
    //旋转
    ctx.save();
    ctx.translate(200,0);
    ctx.rotate(deg*30);
   	ctx.fillStyle="red";
    ctx.fillRect(200,200,200,200);
    ctx.restore();

</script>
</html>